﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>流程图DEMO</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <![endif]-->

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/GooFlow.css"/>
    <script type="text/javascript" src="js/GooFunc.js"></script>
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
    <script type="text/javascript" src="js/GooFlow.js"></script>
    <script type="text/javascript" src="js/util.js"></script>


    <script type="text/javascript">
        var property = {
            width: 800,
            height: 500,
            toolBtns: ["start", "end", "task", "node", "chat", "state", "plug", "join", "fork", "complex"],
            haveHead: true,
            headBtns: ["new", "open", "save", "undo", "redo", "reload", "编辑"],//如果haveHead=true，则定义HEAD区的按钮
            haveTool: true,
            haveGroup: true,
            useOperStack: true
        };
        var remark = {
            cursor: "选择指针",
            direct: "转换连线",
            start: "开始结点",
            end: "结束结点",
            task: "任务结点",
            node: "自动结点",
            chat: "决策结点",
            state: "状态结点",
            plug: "附加插件",
            fork: "分支结点",
            "join": "联合结点",
            complex: "复合结点",
            group: "组织划分框编辑开关"
        };
        var demo;
        var saveId = "";
        $(document).ready(function () {
            list();
            demo = $.createGooFlow($("#demo"), property);
            demo.setNodeRemarks(remark);
            demo.onItemDel = function (id, type) {
                return true;
            }

            demo.onBtnSaveClick = function () {
                var object = {};
                object.nodes = this.$nodeData;
                object.lines = this.$lineData;
                object.areas = this.$areaData;
                object.title = this.$title;
                object.initNum = this.$max;
                var str = JSON.stringify(object);
                var params = {};
                params.url = "gooFlow?method=save";
                params.data = {data: str, id: saveId};
                function dealAjaxBack(data) {
                    alert("保存成功");
                    reloadPage();
                };
                params.dealAjaxBack = dealAjaxBack;
                ajax(params);
            }

            demo.onItemFocus = function (id, type) {
                var node = demo.getItemInfo(id, type);
                $('#edit_form [name=id]').val(id);
                $('#edit_form [name=bizId]').val(node.bizId);
                $('#edit_form [name=name]').val(node.name);
                $('#edit_form [name=color]').val(node.color);
                $('#edit_form [name=type]').find('option').each(function (index, value) {
                    if ($(this).val() == node.type) {
                        $(this).attr('selected', 'selected');
                    }
                });
            }

            $('#title').change(function(){
              demo.setTitle($(this).val());
            })
        });

        function list() {
            var params = {};
            params.url = "gooFlow?method=list";
            params.data = {};
            function dealAjaxBack(data) {
                $('#list').html('');
                if (data != '') {
                    var array = data.split(",");
                    for (var o in array) {
                        var p = $('<p><a href="#" onclick="view(' + "'" + array[o] + "'" + ')">' + array[o] + '</a>' + '    ' + '<a href="#" onclick="deleteRecord(' + "'" + array[o] + "'" + ')">' + '删除' + '</a></p>');
                        $('#list').append(p);
                    }
                }
            };
            params.dealAjaxBack = dealAjaxBack;
            ajax(params);
        }

        function view(id) {
            demo.clearData();
            saveId = id;
            var params = {};
            params.url = "gooFlow?method=view";
            params.data = {id: id};
            function dealAjaxBack(data) {
                jsondata = eval("(" + data + ")");
                demo.loadData(jsondata);
            };
            params.dealAjaxBack = dealAjaxBack;
            ajax(params);
        }

        function deleteRecord(id) {
            saveId = '';
            var params = {};
            params.url = "gooFlow?method=delete";
            params.data = {id: id};
            function dealAjaxBack(data) {
                alert(data);
                reloadPage();
            };
            params.dealAjaxBack = dealAjaxBack;
            ajax(params);
        }

        function saveInfo(){
            var id = $('#id').val();
            var bizId = $('#bizId').val();
            var name = $('#name').val();
            var type = $('#type').val();
            var color = $('#color').val();
            var node = demo.getItemInfo(id, 'node');
            node.type = type;
            node.bizId = bizId;
            node.color = color;
            var nodeDom = $(demo.$nodeDom[id]);
            nodeDom.find('b').eq(0).removeClass().addClass('ico_' + node.type)
            // ”red”,”yellow”,”blue”,”green”等
            nodeDom.css('background',color);
            demo.setName(id, name, 'node');
        }
        function reloadPage() {
            window.location.href = "demo.html";
        }
        var out;

    </script>

    <style type="text/css">
        .GooFlow_node_property{
            float:left;overflow:hidden;border-left:#9AC6FF 1px solid;border-right:#FFFFFF 1px solid;margin:0px 1px;
            background-color:#D0DEF0 ;
            width: 15%;
            height: 500px;
        }
    </style>
</head>
<body>

<div id="list">
</div>
<div id="demo" style="float: left;width: 85%;">

</div>
<div id="edit_form" class="GooFlow_node_property">
    <form>
        <table>
            <tr>
                <td>ID</td>
                <td><input type="text" value="" name="id" id="id" readonly="readonly" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>bizId</td>
                <td><input type="text" value="" name="bizId" id="bizId" onchange="saveInfo()"/></td>
            </tr>
            <tr>
                <td>名称</td>
                <td><input type="text" value="" name="name" id="name" onchange="saveInfo()"/></td>
            </tr>
            <tr>
                <td>颜色</td>
                <td><input type="text" value="" name="color" id="color" onchange="saveInfo()"/></td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <select name="type" id="type" onchange="saveInfo()">
                    <option value="">--请选择--</option>
                    <!--<option value="start">开始节点</option>-->
                    <!--<option value="end">结束结点</option>-->
                    <option value="task">任务结点</option>
                    <option value="node">自动结点</option>
                    <option value="chat">决策结点</option>
                    <option value="state">状态结点</option>
                    <option value="plug">附加插件</option>
                    <option value="fork">分支结点</option>
                    <option value="join">联合结点</option>
                    <option value="complex">复合结点</option>
                </select></td>
            </tr>
        </table>
    </form>
</div>
<div style="clear: both;"></div>
</body>
</html>
